<template>
  <div style="margin: 20px">
    <el-button type="success" icon="el-icon-info">表格</el-button>
    <hr>
    <el-button>普通表格</el-button>
    <hr>
    <el-table :data="userList" style="width: 100%" stripe border>
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" width="200"></el-table-column>
      <el-table-column prop="age" label="年龄" width="100"></el-table-column>
      <el-table-column prop="address" label="地址" width="auto"></el-table-column>
    </el-table>
    <br>
    <el-button>可编辑表格</el-button>
    <el-button type="warning" @click="addUser">添加</el-button>
    <el-button type="info" @click="showUserList">查看数据</el-button>
    <hr>
    <el-table :data="userList" style="width: 100%" stripe border>
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column label="姓名" width="200">
        <template slot-scope="scope">
          <el-input v-if="scope.row.status" v-model="scope.row.name"></el-input>
          <p v-else>{{scope.row.name}}</p>
        </template>
      </el-table-column>

      <el-table-column label="年龄" width="100">
        <template slot-scope="scope">
          <el-input v-if="scope.row.status" v-model="scope.row.age"></el-input>
          <p v-else>{{scope.row.age}}</p>
        </template>
      </el-table-column>

      <el-table-column label="地址" width="200">
        <template slot-scope="scope">
          <el-input v-if="scope.row.status" v-model="scope.row.address"></el-input>
          <p v-else>{{scope.row.address}}</p>
        </template>
      </el-table-column>

      <el-table-column width="auto" label="操作">
        <template slot-scope="scope">
          <el-button type="success"
                     icon="el-icon-check"
                     v-if="scope.row.status"
                     circle
                     @click="updateUser(scope.$index,scope.row)">
          </el-button>
          <el-button type="success"
                     icon="el-icon-edit"
                     v-else
                     circle
                     @click="editUser(scope.$index,scope.row)">
          </el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="removeUser(scope.$index,scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-button>可展开表格</el-button>
    <hr>
    <el-table
      :data="goodsList"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
      </el-table-column>
      <el-table-column
        label="商品名称"
        prop="name">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'CCTable',
    data() {
      return {
        userTemp: null,
        userList: [
          {
            id: 0,
            name: 'Chris Chan',
            age: 42,
            address: '上海嘉定',
            status: false
          },
          {
            id: 1,
            name: 'Kaly Chan',
            age: 40,
            address: '陕西汉中',
            status: false
          }
        ],
        goodsList: [{
          id: '12987122',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987123',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987125',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }, {
          id: '12987126',
          name: '好滋好味鸡蛋仔',
          category: '江浙小吃、小吃零食',
          desc: '荷兰优质淡奶，奶香浓而不腻',
          address: '上海市普陀区真北路',
          shop: '王小虎夫妻店',
          shopId: '10333'
        }]
      }
    },
    methods: {
      //编辑
      editUser(index, row) {
        this.userTemp = JSON.parse(JSON.stringify(this.userList[index]));
        row.status = true;
        console.log(JSON.stringify(this.userTemp));
      },
      //修改
      updateUser(index, row) {
        this.$confirm('你确定要修改这条数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }).catch(() => {
          //找回缓存的数据
          this.revert(row);
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        });
        row.status = false;
        console.log(JSON.stringify(this.userTemp));
      },
      //增加
      addUser() {
        this.userList.push({
          id: this.userList.length,
          name: '',
          age: null,
          address: '',
          status: true
        })
      },
      //删除
      removeUser(index, row) {
        this.$confirm('此操作将永久删除' + row.name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.userList.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //找回缓存的数据 测试过用对象拷贝不能解决问题
      revert(row) {
        row.name = this.userTemp.name;
        row.age = this.userTemp.age;
        row.address = this.userTemp.address;
        row.status = this.userTemp.status;
      },
      //显示当前数据
      showUserList() {
        this.$alert('<div style="background-color: #001528;color: #67C23A"> <pre>' + JSON.stringify(this.userList, null, 4) + '</pre></div>', 'UserList', {
          dangerouslyUseHTMLString: true
        });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
